import {
  GPUIcon,
  CPUIcon,
  MotherboardIcon,
  MemoryIcon,
  HDDIcon,
  SSDIcon,
  ComIcon,
  UserIcon,
  CommitIcon,
} from "@/components/icon/index.tsx";
import CardSum from "./components/CardSum";
import { Space, Card } from "antd";
import CardChart from "./components/CardChart";
import { getCpuInfo } from "@/api/api_cpu.ts";
import { getGpuInfo } from "@/api/api_gpu.ts";
import { getCenterInfo } from "@/api/api_center.ts";
import { getMemoryInfo } from "@/api/api_memory.ts";
import { getHddInfo } from "@/api/api_hdd.ts";
import { getSddInfo } from "@/api/api_ssd.ts";
import { getConfig, getComment, getUserCount } from "@/api/api_upload";
import { useEffect, useState } from "react";
function Dashboard() {
  //获取数量
  const [info, setInfo] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const infoData = await getInfo();
      setInfo(infoData);
    };

    fetchData();
  }, []);

  const getInfo = async () => {
    const [
      CpuInfo,
      GpuInfo,
      CenterInfo,
      MemoryInfo,
      HddInfo,
      SsdInfo,
      Config,
      Comment,
      UserCount,
    ] = await Promise.all([
      getCpuInfo(1, 1, {}),
      getGpuInfo(1, 1, {}),
      getCenterInfo(1, 1, {}),
      getMemoryInfo(1, 1, {}),
      getHddInfo(1, 1, {}),
      getSddInfo(1, 1, {}),
      getConfig({}),
      getComment({}),
      getUserCount(),
    ]);

    return [
      { type: "CPU", value: CpuInfo.data.total, childComponent: <CPUIcon /> },
      { type: "GPU", value: GpuInfo.data.total, childComponent: <GPUIcon /> },
      {
        type: "主板",
        value: CenterInfo.data.total,
        childComponent: <MotherboardIcon />,
      },
      {
        type: "内存",
        value: MemoryInfo.data.total,
        childComponent: <MemoryIcon />,
      },
      { type: "硬盘", value: HddInfo.data.total, childComponent: <HDDIcon /> },
      {
        type: "固态硬盘",
        value: SsdInfo.data.total,
        childComponent: <SSDIcon />,
      },
      { type: "组件", value: Config.data.total, childComponent: <ComIcon /> },
      {
        type: "用户",
        value: UserCount.data.count,
        childComponent: <UserIcon />,
      },
      { type: "评论", value: Comment.data, childComponent: <CommitIcon /> },
    ];
  };

  return (
    <div>
      <Space wrap size="large" style={{ marginBottom: 20 }}>
        {info.map((item, index) => (
          <CardSum
            type={item.type}
            childComponent={item.childComponent}
            value={item.value}
            key={index}
          ></CardSum>
        ))}
      </Space>
      <Card>
        <CardChart
          count={info.map((item) => {
            return item.value;
          })}
        />
      </Card>
    </div>
  );
}

export default Dashboard;
